<script lang="ts" setup>
import {Check,Delete,Edit,Search} from '@element-plus/icons-vue'
import { ElContainer, ElTable } from 'element-plus'
import {ref} from 'vue'
const applyList = ref([{
    id:"1",
    categoryName:"1",
    categoryAlias:"1",
    createUser:"1",
    createTime:"1",
    updateTime:"1"
}])
const pageNum = ref(1)
const pageSize = ref(20)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref("")
const categoryId = ref("")
const state = ref("")
const onCurrentChange = (num:number) => {
    pageNum.value = num
}
const onSizeChange = (size:number) => {
    pageSize.value = size
}
</script>
<template #default>
     <el-table :data="applyList" border class="categoryTable">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" sortable label="序号" width="180" />
        <el-table-column prop="categoryName" sortable label="名称" width="180" />
        <el-table-column prop="categoryAlias" sortable label="别名" />
        <el-table-column prop="createUser" sortable label="创建人" />
        <el-table-column prop="createTime" sortable label="创建时间" />
        <el-table-column prop="updateTime" sortable label="更新时间" />
        <el-table-column label="操作">
        <template #default="{row}">
            <el-button type="primary" :icon="Edit" circle></el-button>
            <el-button type="danger" :icon="Delete" circle></el-button>
            <el-button type="warning" :icon="Check" circle></el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style=" z-index: 10000; top: 500px;"
    />
</template>
<style scoped></style>